<template>
  <div class="bottomRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span><icon name="chart-bar" class="text-icon"></icon></span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 mt-1">用户概况</span>
        </div>
      </div>
      <div>
        <div>
          <div style="padding-bottom: 20px">
            <span class="" style="text-align: center">车牌用户转化</span>
            <span class="itentitle" style="padding-left: 20px"
              >{{ 85 }}%&nbsp;&nbsp;</span
            >
            <span class="" style="text-align: center">支付用户转化率</span>
            <span class="itentitle" style="padding-left: 20px">{{ 79 }}%</span>
          </div>
        </div>
        <div id="chart-user"></div>
        <div id="chart-pay" style="margin-top:40px;"></div>
        <!-- <chart></chart>
        <chart1></chart1> -->
      </div>
    </div>
  </div>
</template>

<script>
//import {defineComponent, onMounted, reactive} from 'vue'
// import Chart from "./chart/index";
// import Chart1 from "./chart/index1";
import axios from "axios";
import echarts from "echarts";
// import axios from "axios";
// import {useRoute} from "vue-router";
// import {parkSum} from "@/api/api";
// import Draw from "@/views/bottomLeft/chart/draw";
export default {
  mounted() {
    this.getData()
    // axios
    //   .get("https://dda-park.com/adminApi/dataView/user/conversionRate")
    //   .then((res) => {
    //     this.arrs = res.data;
    //     //console.log(this.config.data)
    //   });
    // axios
    //   .get("https://dda-park.com/adminApi/dataView/pay/conversionRate")
    //   .then((res) => {
    //     this.arrs1 = res.data;
    //     //console.log(this.config.data)
    //   });
  },
  data() {
    return {
      userData: [],
      userChart: undefined,
      carData: [],
      carChart: undefined
    };
  },
  components: {
    // Chart,
    // Chart1,
  },
  methods: {
    getData() {
      axios
        .get("https://dda-park.com/adminApi/dataView/user/addedUsersM")
        .then((res) => {

                for (let i = 0; i < res.data.length; i++) {
                this.userData.push(res.data[i].y);
              }
        });
      axios
        .get("https://dda-park.com/adminApi/dataView/car/addedCarM")
        .then((res) => {
                     for (let i = 0; i < res.data.length; i++) {
              this.carData.push(res.data[i].y);
            }
        });
        this.drawChart(this.userData, this.carData)
    },
    drawChart(userData,carData) {
                    console.log("11=>", userData,carData);
      let dom = document.getElementById("chart-user");
      this.userChart = echarts.init(dom);
      this.userChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '注册用户:<br>{b}:{c} 人'
          },
          legend: {
            data: ["已贯通"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          title: {
            text: "注册用户统计",
            textStyle: {
              color: "#87CEFA",
              fontSize: 14,
            },
            left: "center",

          },
          grid: {
            x: "8%",
            width: "82%",
            top: "5%",
            bottom: '15%'
          },
          xAxis: {
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "贯通率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#FF8C00"
                }
              },
              data: [0,4765,10614,13522,19757,19757,12068,7854,6150,7003, 5877, 4233]
            },

          ]
      });

       let car = document.getElementById("chart-pay");
      this.carChart = echarts.init(car);
      this.carChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '新增车辆:<br>{b}:{c}台'
          },
          legend: {
            data: ["已贯通"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
            x: "8%",
            width: "82%",
            top: "5%",
            bottom: '10%'
          },
          title: {
            text: "新增车辆统计",
            textStyle: {
              color: "#87CEFA",
              fontSize: 14,
            },
            left: "center",

          },

          xAxis: {
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "贯通率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "green",
                  //label: {show: true}
                }
              },
              data: [0,3436,8368,11528,18043,18043,11154,6875,5630,6017, 4267, 2584]
            },

          ]
      });
    },
  },
};
</script>

<style lang="scss">
$box-height: 520px;
$box-width: 100%;
.bottomRight {
  padding: 14px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
.itentitle {
  text-align: center;
  color: #40e0d0;
  font-size: 28px;
}
#chart-user, #chart-pay {
  height: 170px;
  width: 100%;
}
</style>
